import React, { useState } from 'react';
import DistributionPage from './DistributionPage';
import CommitmentConfirmationPage from './CommitmentConfirmationPage'
import {
    OpportunityCostAll,
    MaterialTransactionSheetTabs
} from './style';
/**
 * @description: 费用管理 -- 内部交易 --  机会成本分配单
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-26）创建
 */

const OpportunityCost = () => {
    const [tabsSelect, setTabsSelect] = useState(true); //true 出库 false 领用确认
    return <OpportunityCostAll>
        <MaterialTransactionSheetTabs>
            <div className='tabs_button_box'>
                <button onClick={() => setTabsSelect(true)} className={!tabsSelect ? 'tabs_button_select_no' : 'tabs_button_select'}>分派单</button>
                <button onClick={() => setTabsSelect(false)} className={!tabsSelect ? 'tabs_button_select' : 'tabs_button_select_no'}>承担确认</button>
            </div>
        </MaterialTransactionSheetTabs>
        {
            tabsSelect
                ?
                <DistributionPage />
                :
                <CommitmentConfirmationPage />
        }
    </OpportunityCostAll>
}

export default OpportunityCost;